import React, { useEffect, useMemo, useState } from 'react';
import { Layout, Menu } from 'antd';
import { 
    CloudServerOutlined, 
    NodeIndexOutlined, 
    MenuUnfoldOutlined, 
    ProductOutlined,
    CommentOutlined, 
    TeamOutlined, 
    BarChartOutlined, 
    SettingOutlined, 
    InfoCircleOutlined 
} from '@ant-design/icons';
import { useTranslation } from 'react-i18next';
import { useLocation, useNavigate } from 'react-router-dom';
import { useAppContext } from '@/context/AppContext';
// 定义菜单项类型
type MenuItem = {
    key: string;
    icon: React.ReactNode;
    label: string;
    onClick: () => void;
};
// 定义菜单数据生成函数
const getMenuItems = (handleClick: (path: string) => void, t: (key: string) => string): MenuItem[] => [
    {
        key: 'cluster',
        icon: <CloudServerOutlined />,
        label: t('aside:cluster'),
        onClick: () => handleClick('/cluster'),
    },
    {
        key: 'node',
        icon: <NodeIndexOutlined />,
        label: t('aside:node'),
        onClick: () => handleClick('/node'),
    },
    {
        key: 'topic',
        icon: <MenuUnfoldOutlined />,
        label: t('aside:topic'),
        onClick: () => handleClick('/topic')
    },
    {
        key: 'producer',
        icon: <ProductOutlined />,
        label: t('aside:producer'),
        onClick: () => handleClick('/producer')
    },
    {
        key: 'consumer',
        icon: <CommentOutlined />,
        label: t('aside:consumer'),
        onClick: () => handleClick('/consumer')
    },
    {
        key: 'group',
        icon: <TeamOutlined />,
        label: t('aside:group'),
        onClick: () => handleClick('/group')
    },
    {
        key: 'monitor',
        icon: <BarChartOutlined />,
        label: t('aside:monitor'),
        onClick: () => handleClick('/monitor')
    },
    {
        key: 'settings',
        icon: <SettingOutlined />,
        label: t('aside:settings'),
        onClick: () => handleClick('/settings')
    },
    {
        key: 'about',
        icon: <InfoCircleOutlined />,
        label: t('aside:about'),
        onClick: () => handleClick('/about')
    },
];

const Side: React.FC = () => {
    const { t } = useTranslation();
    const location = useLocation();
    const navigate = useNavigate();
    const [collapsed, setCollapsed] = useState(true);
    const { config } = useAppContext();
    const handleClick = (path: string) => {
        navigate(path);
    }
    // const menuItems = getMenuItems(handleClick, t);
    // 缓存menuItems
    const menuItems = useMemo(() => [
        {
            key: 'cluster',
            icon: <CloudServerOutlined />,
            label: t('aside:cluster'),
            onClick: () => handleClick('/cluster'),
        },
        {
            key: 'node',
            icon: <NodeIndexOutlined />,
            label: t('aside:node'),
            onClick: () => handleClick('/node'),
        },
        {
            key: 'producer',
            icon: <ProductOutlined />,
            label: t('aside:producer'),
            onClick: () => handleClick('/producer')
        },
        {
            key: 'consumer',
            icon: <CommentOutlined />,
            label: t('aside:consumer'),
            onClick: () => handleClick('/consumer')
        },
        {
            key: 'group',
            icon: <TeamOutlined />,
            label: t('aside:group'),
            onClick: () => handleClick('/group')
        },
        {
            key: 'monitor',
            icon: <BarChartOutlined />,
            label: t('aside:monitor'),
            onClick: () => handleClick('/monitor')
        },
        {
            key: 'settings',
            icon: <SettingOutlined />,
            label: t('aside:settings'),
            onClick: () => handleClick('/settings'),
        },
        {
            key: 'about',
            icon: <InfoCircleOutlined />,
            label: t('aside:about'),
            onClick: () => handleClick('/about'),
        },
    ], [t]);
    // 缓存 selectedKeys
    const selectedKeys = useMemo(() => {
        const path = location.pathname;
        const key = path.split('/')[1] || 'cluster';
        console.log("当前路径：", path, "选中的菜单：", key);
        return [key];
    }, [location.pathname]);
    // 缓存theme
    const theme = useMemo(() => config?.theme === 'dark' ? 'dark' : 'light', [config?.theme]);
    const { setFlexNum } = useAppContext();
    const collapseClick = () => {
        setCollapsed(!collapsed);
        if (collapsed) {
            setFlexNum?.(140)
        } else {
            setFlexNum?.(80)
        }
    }
    return (
        <Layout.Sider
            collapsible
            collapsed={collapsed}
            onCollapse={collapseClick}
            width="140px"
            collapsedWidth="80px"
            trigger={
                <div
                    style={{
                        width: "100%",
                        justifyContent: 'center',
                        alignItems: 'center',
                        height: '100%',
                    }}
                >
                    <MenuUnfoldOutlined />
                </div>
            }
            style={{
                position: 'fixed',
                overflow: 'auto',
                height: '100vh',
            }}
        >
            <div style={{ height: '100vh', paddingBottom: '60px' }}>
                <Menu
                    theme={theme}
                    mode="inline"
                    items={menuItems}
                    selectedKeys={selectedKeys}
                    style={{
                        minHeight: '100vh',
                        paddingBottom: '150px'
                    }}
                />
            </div>
        </Layout.Sider>
    );
};

export default Side;
